<template>
	<div class="base-search">
		<el-form @submit.prevent :model="queryData" ref="queryForm" :inline="true">
			<el-form-item v-for="item in queryParams" :label="item.label+':'" :prop="item.prop" :key="item.prop">
				<el-input
					v-if="item.type === 'input'"
					v-model="queryData[item.prop]"
					:placeholder="`请输入` + item.label"
					clearable
					style="width: 220px"
					@keyup.enter="handleQuery"
				/>
				<el-select v-if="item.type === 'select'" v-model="queryData[item.prop]" :placeholder="`请选择` + item.label" clearable style="width: 220px">
					<el-option v-for="dict in item.data.value" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
				<el-date-picker
					v-else-if="item.type === 'datePicker'"
					v-model="queryData[item.prop]"
					style="width: 220px"
					value-format="YYYY-MM-DD HH:mm:ss"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
				<el-date-picker
					v-else-if="item.type === 'dateTimePicker'"
					v-model="queryData[item.prop]"
					style="width: 220px"
					value-format="YYYY-MM-DD HH:mm:ss"
					type="datetimerange"
					range-separator="-"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
				></el-date-picker>
				<template v-if="item.type === 'custom'">
					<slot :name="item.prop" :value="queryData[item.prop]"></slot>
				</template>
			</el-form-item>

			<el-form-item>
				<el-button :disabled="disabled" :type="props.changeB?'':'primary'" icon="search" :class="props.changeB?'btnG':''" style="width: 80px" @click="handleQuery">搜索</el-button>
				<el-button icon="refresh" style="width: 80px" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script setup>
import { reactive, ref, toRaw } from 'vue'

const props = defineProps({
	queryParams: {
		type: Array
	},
	queryData: {
		type: Object
	},
	changeB: {
		type: Boolean,
		default: false
	}
})
const emits = defineEmits(['handleQuery', 'resetQuery'])
const { queryParams } = toRaw(props)
const queryData = reactive(props.queryData)
const handleQuery = () => {
	disabled.value = true
	emits('handleQuery')
	setTimeout(() => {
		disabled.value = false
	}, 200)
}
const resetQuery = () => {
	emits('resetQuery')
}
const disabled = ref(false)
</script>
<style lang="scss" scoped>
.btnG {
	background: rgba(69, 132, 75, 1);
	color: #ffffff;
}
.base-search {
	border: 1px solid #d8dce5;
    padding: 15px 0px 0 20px;
    margin-bottom: 5px;
    border-radius: 2px;
}
</style>
